<template>
    <div class="goods col tcenter bg-2">
        <div class="goods-name cr-2">商品秀</div>
        <div class="goods-title">商业与技术的无缝对接</div>
        <div  class="goods-list rows">
            <div class="goods-list-con col bg-1"  v-for="(item,index) in goods" :key="index">
                <img :src="item.img" alt="">
                <div class="goods-list-con-name">{{item.name}}</div>
            </div>
        </div>
    </div>
</template>


<script>
export default {
  data() {
    return {
      goods: [
        {
          name: "美的生活电器旗舰店",
          img: require("../../static/img/1.webp"),
          bg: "orange"
        },
        {
          name: "ThinkPad官方旗舰店",
          img: require("../../static/img/2.webp"),
          bg: "pink"
        },
        {
          name: "戴尔官方旗舰店",
          img: require("../../static/img/3.webp"),
          bg: "blue"
        },
        {
          name: "sony官方旗舰店",
          img: require("../../static/img/4.webp"),
          bg: "red"
        },
        {
          name: "科沃斯旗舰店",
          img: require("../../static/img/5.webp"),
          bg: "orange"
        },
        {
          name: "苏宁易购官方旗舰店",
          img: require("../../static/img/6.webp"),
          bg: "pink"
        },
        {
          name: "飞利浦官方旗舰店",
          img: require("../../static/img/7.webp"),
          bg: "blue"
        },
        {
          name: "美的官方旗舰店",
          img: require("../../static/img/9.webp"),
          bg: "red"
        },
        {
          name: "美的官方旗舰店",
          img: require("../../static/img/9.webp"),
          bg: "red"
        }
      ]
    };
  }
};
</script>


<style lang="less" scoped>
.goods {
  padding: 0 10vw;
}
.goods-name {
  margin-top: 20px;
  font-size: 22px;
  font-weight: bold;
}
.goods-title {
  margin-top: 4px;
  margin-bottom: 10px;
  font-size: 18px;
}
.goods-list {
  justify-content: space-around;
}
.goods-list-con {
  width: 19%;
  transition: all 1s ease;
  margin-bottom: 12px;
  border-radius: 6px;
  position: relative;
  padding-bottom: 98px;
}
.goods-list::after {
  content: "";
  width: 19%;
  height: 198px;
}
.goods-list-con img {
  width: 100%;
  height: 228px;
  border-radius: 6px 6px 0 0;
}
.goods-list-con-name {
  width: 100%;
  height: 98px;
  background: linear-gradient(#f360e7, #c01ab3, #6d0865);
  border-radius: 0 0 6px 6px;
  color: #fff;
  font-size: 20px;
  line-height: 98px;
  position: absolute;
  left: 0;
  bottom: 0;
  transition: all 1s ease;
}
.goods-list-con-name:hover {
  height: 108px;
}
</style>
